<template>
  <div>
    <div class="searchView">
      <span>评价:</span>
      <div style="margin: 0 0 0 1%">
        <el-select
          size="small"
          v-model="query.status"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <span style="margin: 0 0 0 1%">用户:</span>
      <div style="margin: 0 0 0 1%">
        <el-input size="small" v-model="query.username"></el-input>
      </div>
      <div style="margin: 0 0 0 1%">
        <el-button type="primary" @click="getList" size="small">搜索</el-button>
      </div>
    </div>
    <div class="tableView">
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column prop="id" label="商品单号"> </el-table-column>
        <el-table-column prop="username" label="用户名"> </el-table-column>
        <el-table-column prop="status" label="回复状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 0"
              ><el-tag type="danger">差评</el-tag></span
            >
            <span v-if="scope.row.status == 1"
              ><el-tag type="warning">好评</el-tag></span
            >
            <span v-if="scope.row.status == 2"
              ><el-tag type="success">管理员已回复</el-tag></span
            >
          </template>
        </el-table-column>
        <el-table-column prop="control" label="操作栏">
          <template slot-scope="scope">
            <el-button
              type="warning"
              v-if="scope.row.answer == null || scope.row.answer == ''"
              @click="answers(scope.row)"
              >回复</el-button
            >
            <!-- {{ scope.row }} -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="paginationView">
      <el-pagination
        @current-change="handleCurrentChange"
        :page-size="10"
        layout="prev, pager, next, jumper"
        :total="pagination.total"
      >
      </el-pagination>
    </div>
    <dialogView ref="dialog" />
  </div>
</template>

<script>
import { getCommentList } from "@/api/shop";
import dialogView from "./dialogView.vue";
export default {
  data() {
    return {
      tableData: [], //订单
      query: {
        status: "",
        username: "",
      },
      options: [
        {
          value: "0",
          label: "差评",
        },
        {
          value: "1",
          label: "好评",
        },
        {
          value: "2",
          label: "系统回复",
        },
      ],
      pagination: {
        total: 0, //总数
        pageNo: 1,
      },
    };
  },
  components: {
    dialogView,
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      let obj={
        username:this.query.username,
        status:this.query.status,
        pageNo:this.pagination.pageNo,
        type:"2"
      }
      getCommentList(obj).then(res=>{
        if(res.code==200){
          this.tableData=res.data.data
          console.log(res.data)
          this.pagination.total=res.data.total
        }
      });
    },
    handleCurrentChange(e){
     console.log(e)
     this.pagination.pageNo = e;
     this.getList()
    },
    answers(e){
      console.log(e,'pppp')
      this.$refs.dialog.visible=true
      this.$refs.dialog.form.commentId=e.commentId
    }
  },
};
</script>

<style lang="scss" scoped>
.searchView {
  width: 90%;
  margin: 2vw auto;
  display: flex;
  align-items: center;
}
.tableView {
  width: 90%;
  margin: 2vw auto;
}
.paginationView {
  width: 90%;
  margin: 0 auto;
}
</style>
